<script lang='ts' setup name='App'>
import { ref } from "vue";
import Person from "@/components/Person.vue";
import UserList from "@/components/UserList.vue";

import type {UserInter} from '@/types/index'

let  name = ref('张飞')
let  age = ref(18)
let  address = ref('河北')


let user1 = ref<UserInter>({
            name: "刘备",
            age: 50,
            address: "荆州"
})

let user2 = ref<UserInter>({
            name: "曹操",
            age: 58,
            address: "沛县",
            max:500,
            abc:100,
            def:200,
            qqq:300
})


let userList = ref<UserInter[]>([
      { name: "张飞",  age: 50,  address: "荆州" },
      { name: "刘备",  age: 10,  address: "荆州" },
      { name: "关羽",  age: 30,  address: "荆州" }
])


</script>

<template>
      <div class="parent">

            <Person :name="name" :age="age" :address="address"></Person>
           
            <Person :name="user1.name" :age="user1.age" :address="user1.address"></Person>
            

            父组件的：{{ user2 }}
            <Person  v-bind="user2"></Person>

            父组件userList：{{ userList }}
            <UserList :userList="userList" ></UserList>

            
      </div>


</template>

<style scoped>
      .parent{
            border: solid 1px gray;
            padding: 10px;
            background-color: antiquewhite;
      }
</style>